<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="deployRegister"
    @ok="confirmSubmit"
    @close="drawerReset"
    width="820"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="box-drawer" ref="eleRef">
      <div class="drawer-box">
        <div class="box-title">基本信息</div>
        <div class="box-form">
          <BasicForm @register="basicFormConfig" />
        </div>
      </div>
      <div class="drawer-box">
        <div class="box-title">配置信息</div>
        <div class="box-form">
          <BasicForm @register="configureFormConfig" />
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { BasicForm, FormSchema, useForm } from '@/components/Form/index'
import { getDeployBasicFormConfig, getDeployConfigureFormConfig } from '../dataSource'
import { getUpdateSchemaArr } from '@/utils/formSchema'
import { numTransString, getFormatAuthList, scrollToFirstError } from '@/utils'
import { operateActionType } from '@/types/enum'
import { deployRecord } from '@/types/deployUpgrade'
import { message } from 'ant-design-vue'
import { cloneDeep } from 'lodash-es'
import api from '@/api'

const { addProject, editProject } = api

const emit = defineEmits(['operateSuccess', 'register'])
const eleRef = ref<null | HTMLElement>(null)

const drawerInfo = reactive<{ type: string; record: Partial<deployRecord> }>({
  type: '',
  record: {}
})

const deployBasicFormConfig = getDeployBasicFormConfig()
const deployConfigureFormConfig = getDeployConfigureFormConfig()
// 基本信息
const [basicFormConfig, { setFieldsValue, getFieldsValue, validate, resetFields, updateSchema }] =
  useForm(deployBasicFormConfig)
// 配置信息
const [
  configureFormConfig,
  {
    setFieldsValue: setConfigureFieldsValue,
    getFieldsValue: getConfigureFieldsValue,
    validate: validateConfigure,
    resetFields: resetConfigureFields,
    updateSchema: updateConfigureSchema
  }
] = useForm(deployConfigureFormConfig)

const [deployRegister, { closeDrawer, changeOkLoading }] = useDrawerInner(async (data) => {
  drawerInfo.type = data.type

  updateSchema(getUpdateSchemaArr(deployBasicFormConfig.schemas, data.type))
  updateConfigureSchema(getUpdateSchemaArr(deployConfigureFormConfig.schemas, data.type))

  if (data.type !== operateActionType.ADD) {
    let record = cloneDeep(data.record)
    drawerInfo.record = record
    setFieldsValue({
      appName: record.appName,
      packageName: record.packageName,
      systemName: record.systemName
    })
    setConfigureFieldsValue({
      memory: record.memory,
      cpu: numTransString(record.cpu),
      port: numTransString(record.port)
    })
  }
})

const drawerReset = () => {
  changeOkLoading(false)
  resetFields()
  resetConfigureFields()
}

// 提交数据
const confirmSubmit = async () => {
  try {
    await validate()
    await validateConfigure()
    let formValue = getFieldsValue()
    let formConfigureValue = getConfigureFieldsValue()
    changeOkLoading(true)
    if (drawerInfo.type === operateActionType.ADD) {
      await addProject({
        ...formValue,
        ...formConfigureValue
      })
    } else if (drawerInfo.type === operateActionType.EDIT) {
      await editProject({
        ...formValue,
        ...formConfigureValue,
        id: drawerInfo.record.id
      })
    }
    message.success(drawerInfo.type === operateActionType.ADD ? '项目新增成功' : '项目编辑成功')
    closeDrawer()
    drawerReset()
    emit('operateSuccess')
  } catch (error) {
    changeOkLoading(false)
    scrollToFirstError(eleRef.value)
  }
}
</script>

<style lang="less" scoped>
.box-drawer {
  padding: 8px 0;
  position: relative;
  .drawer-box {
    margin-bottom: 24px;
    &:last-child {
      margin-bottom: 0;
    }
    .box-title {
      padding-left: 12px;
      padding-bottom: 8px;
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 600;
      color: @text-color;
      line-height: 22px;
      position: relative;
      border-bottom: 1px solid #e8e8e8;
      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background: @primary-color;
        border-radius: 2px;
        position: absolute;
        left: 0;
        top: 2px;
      }
    }
    .box-form {
      padding: 24px 24px 4px;
      border: 1px solid #e8e8e8;
      border-radius: 2px;
      position: relative;
    }
  }
  :deep(.ant-form-item-label) {
    font-weight: 600;
    label {
      width: 100%;
    }
  }
}
</style>
